<template>
  <mu-flex class="chatroom-input" align-items="center">
    <input
      type="text"
      v-model="text"
      @input="e=>{text = e.target.value}"
      class="xx-input-primary"
      v-elevation="4"
      @keydown.enter="onSend"
      autofocus
    />
    <mu-button @click="$emit('on-image')" icon>
      <mu-icon value="image"></mu-icon>
    </mu-button>
  </mu-flex>
</template>
<script>
export default {
  name: 'chatroom-input',
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      text: this.value,
    }
  },
  watch: {
    value (newVal) {
      this.text = newVal
    },
    text (newVal) {
      this.$emit('input', newVal)
    },
  },
  methods: {
    onSend (e) {
      this.$emit('on-send', this.text)
    },
  },
}
</script>
<style lang="scss" scoped>
.chatroom-input {
  width: 100%;
  margin: 20px 0;
  input {
    border: none;
    outline: none;
    height: 36px;
    flex: 1;
    text-indent: 10px;
    margin-right: 10px;
    border-radius: 7px;
    &:focus {
      border: none;
      outline: none;
    }
  }
  .mu-raised-button {
    border-radius: 7px;
  }
}
</style>
